<template>
  <!-- 水球图图 -->
  <!-- style="width: 100%; height: 100%" -->
  <div style="width: 100%; height: 100%">
    <div ref="oneLeft" class="multiBeam" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Portait',
  props: {},
  data() {
    return {
      chart: null,
      // 配置项
      scoreOption: {}
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.onResize)
    window.onresize = null
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      this.chart = echarts.init(this.$refs.oneLeft)
      this.scoreOption = this.options || {
        title: [
          {
            text: '已完成',
            x: 'center',
            top: '55%',
            textStyle: {
              color: '#3595c4', // 下面标题文字颜色
              fontSize: 16,
              fontWeight: '100'
            }
          },
          {
            text: '75%',
            x: 'center',
            y: 'center',
            textStyle: {
              fontSize: '60',
              color: '#614bea', // 百分比文字颜色
              fontFamily: 'DINAlternate-Bold, DINAlternate',
              foontWeight: '600' // 文本粗细
            }
          }
        ],
        backgroundColor: '#fff', // 背景颜色
        polar: {
          radius: ['42%', '52%'],
          center: ['50%', '50%']
        },
        angleAxis: {
          max: 100,
          show: false
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
              color: '#fff'
            },
            data: [60],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0.1,
                    color: '#16CEB9'
                  },
                  {
                    offset: 1,
                    color: '#6648FF'
                  }
                ])
              }
            }
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['56%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)',
              borderWidth: 1,
              borderColor: '#5269EE'
            },
            data: [100]
          },
          {
            name: '',
            type: 'pie',
            startAngle: 80,
            radius: ['38%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
              color: 'rgba(66, 66, 66, .1)',
              borderWidth: 1,
              borderColor: '#5269EE'
            },
            data: [100]
          }
        ]
      }
      this.chart.setOption(this.scoreOption)
      window.addEventListener('resize', this.onResize)
    },
    onResize() {
      this.chart.resize()
    }
  }
}
</script>
  <style scoped>
.multiBeam {
  width: 100%;
  height: 100%;
}
</style>

